<template>
	<view class="content">
		<!-- #ifdef APP -->
		<NavBarCommon></NavBarCommon>
		<!-- #endif -->
		<view class="claimBox">
			<image src="@/static/home/right.png" alt="" class="claim1" @click="goBack" />
			<view class="claim2">Claim</view>
			<view class="" style="color: #ffffff;margin-right: 20rpx;" v-if="walletAddress" @click="loginOut">
				{{$t('exit')}}
			</view>
		</view>
		<!--  -->
		<view class="addressOne">
			<image src="@/static/home/TP.png" alt="" class="tp" v-if="model.address" />
			<view class="wallet-avatar-gap" v-if="!model.address"></view>
			<view class="address">{{ walletAddress ? formatPublicKey(walletAddress) : "连接钱包" }}</view>
			<image src="/static/home/seven.png" alt="" class="down" v-if="false" />
			<view class="" style="margin-left: 200rpx;color: white;font-size: 15px;">
				<!-- <text v-if="model.role == 0">默认</text> -->
				<!-- <text v-if="model.role == 1">基金会</text>
				<text v-if="model.role == 2">创世区块</text>
				<text v-if="model.role == 3">合伙人</text> -->
				<image v-if="model.role == 1" src="/static/invited/yellow.png" class="oneImage" />
				<image v-if="model.role == 2" src="/static/invited/blue.png" class="oneImage" />
				<image v-if="model.role == 3" src="/static/invited/white.png" class="oneImage" />
			</view>
		</view>
		<view class="picBox">
			<view class="picOne">
				<image src="/static/home/eight.png" alt="" class="pic1" />
				<view class="num1">{{$t('totalrevenue')}}</view>
				<image src="/static/home/eye1.png" alt="" class="pic2" @click="hideEyes = !hideEyes" />
				<view class="num2" v-if="hideEyes">{{ model.totalAllocated ? Number(model.totalAllocated).toFixed(2) : '0' }}
				</view>
			</view>
			<view class="drawDownBox">
				<view class="drawOne">
					<view class="one">{{ model.totalAllocated - model.released }}</view>
					<view class="one1"> {{$t('tobeunlocked')}} </view>
				</view>
				<view class="drawTwo">
					<view class="" style="font-size: 19px;color: #ffffff;">{{ model.pending }}</view>
					<view class="two2"> {{$t('Pendingcollection')}} </view>
				</view>
				<view class="drawThree">
					<view class="" style="font-size: 19px;color: #ffffff;">{{ model.claimed }}</view>
					<view class="three3"> {{$t('havereceived')}} </view>
				</view>
			</view>
			<!--  -->
			<u-gap height="10"></u-gap>
			<view class="progress-container " style="padding: 0 10px ;">
				<!-- customStyles -->
				<!-- :style="{ width: progress + '%' }" -->
				<view class="progress-bar" :style="customStyles"></view>
				<text class="percentage" style="z-index: 11;">
					<text>{{ progress }}</text>
					<text style="font-size: 18px;">%</text>
				</text>
			</view>
		</view>



		<!-- 合约 -->
<!-- 		<view class="submitBox" @click="getBtn" :class="haveReceived > 1 ? 'active' : ''">
			<view class="submit">{{$t('received')}}</view>
		</view> -->
		<button class="submitBox" :disabled="isButtonDisabled" :loading='isButtonDisabled' @click="getBtn" :class="haveReceived > 1 ? 'active' : ''">
			<view class="submit">{{$t('received')}}</view>
		</button>
	</view>
</template>

<script>
import {
	getUserInfo,
	getHoldersRewards,
	vestingbeneficiary,
	setgetReleaseData
} from '@/api/index.js'


import { removeToken } from '@/utils/auth.js'
export default {
	methods: {
		loginOut() {
			// uni.clearStorageSync();
			uni.navigateTo({
				url: '/pages/loginOut/loginOut'
			})
			// removeToken()
			uni.setStorageSync('token', '');
			uni.setStorageSync('walletAddress', '');
		},
		// 金额
		monytoFixed(value, num) {
			return value.toFixed(num)
		},
		// 方法用于格式化 publicKey 的显示
		formatPublicKey(key) {
			if (!key) return "";
			const start = key.slice(0, 4);
			const end = key.slice(-4);
			return `${start}**${end}`;
		},
		// vesting
		async vestingbeneficiaryApi() {
			console.log('12323131');
			// uni.showLoading({
			// 	title:'加载中...',
			// 	mask:true
			// })
			const walletAddress = uni.getStorageSync('walletAddress')
			let res = await vestingbeneficiary(walletAddress)
			console.log(res, 'resres vestingbeneficiaryApi');
			this.model = {
				...this.model,
				...res.data
			}
			// uni.hideLoading()
			console.log(this.model, 'this.modelthis.model');
			// this.model.claimed = ''
			// this.model.pending = ''
			// this.model.released = ''
			// this.model.totalAllocated = ''

			if (res.data) {
				this.progress
				let percentage = Number(this.model.released).toFixed() / Number(this.model.totalAllocated)
					.toFixed() * 100
				this.progress = percentage.toFixed(2)
			}
			console.log(this.progress, 'progress');
		},
		// 用户信息
		async getUserInfoApi() {
			let address = uni.getStorageSync('walletAddress')
			let res = await getUserInfo(address)
			this.model = {
				...this.model,
				...res.data
			}
		},
		// 收益
		async setgetReleaseApi() {
			console.log('setgetReleaseApi');
			let data = {
				// releaseAmount:String(this.pendingCollection),
				releaseAmount: String(this.haveReceived),
				planId: this.model.role,
				address: uni.getStorageSync('walletAddress')
			}
			let res = await setgetReleaseData(data)
			if (res.code == 200) {
				this.isButtonDisabled = false
				await this.vestingbeneficiaryApi()
			}else{
				this.isButtonDisabled = false
			}
		},
		getBtn() {
			console.log('领取');
			// this.setgetReleaseApi()
			// 如果已领取 > 待领取 
			// console.log(this.model.claimed, "this.claimed 已领取");
			// console.log(this.model.pending, "this.pending 待领取");
			if (this.model.claimed >= this.model.pending) {
				uni.showToast({
					title: '暂无领取代币',
					icon: 'none',
				})
			} else {
				uni.showToast({
					title: 'please wating...',
					icon: 'none',
				})
				this.isButtonDisabled = true
				// uni.$u.debounce(this.setgetReleaseApi, 500)
				this.setgetReleaseApi()
			}
		},
		goBack() {
			uni.navigateBack({})
		},
		updateProgress(newProgress) {
			this.progress = newProgress;
		},
	},


	data() {
		return {
			isButtonDisabled:false,
			// 隐藏
			hideEyes: false,
			progress: 0, // 初始进度值
			walletAddress: uni.getStorageSync('walletAddress'),
			model: {
				address: "", // 钱包地址
				role: "", // role 是那个徽标需要使用的
				"totalHolderReward": "0", // 总持有者奖励：表示用户因持有资产而获得的总奖励数。通常是一个累积数值。
				"perSecondReward": "0", // 每秒奖励：表示用户每秒钟能获得的奖励数量。例如，如果奖励是按时间累计的，这个字段会显示每秒的奖励数。
				"earnedRewards": "0", // 已赚取奖励：表示用户已经获得的奖励总额，这些奖励通常可以被提取或使用。
				"pendingRewards": "0", // 待领取奖励：表示用户已累积但尚未领取的奖励。即奖励已生成，但用户还未提取。
				"rank": "0", // 排名：表示用户在某个系统中的排名，可能是基于持有的资产量、贡献或其他指标。
				//Vesting 收益
				"id": 0,
				"walletAddress": "",
				"totalAmount": "",
				"releasedAmount": "",

				/*  */
				"totalAllocated": 0, // 总共分配的数量
				"released": 0, // 已经释放或可用的数量
				"claimed": 0, // 已经被认领或领取的数量
				"pending": 0, // 待处理的数量

				// "totalAllocated": "", // 总共分配的数量
				// "released": "", // 已经释放或可用的数量
				// "claimed": "", // 已经被认领或领取的数量
				// "pending": "", // 待处理的数量
			}
		};
	},
	computed: {
		// 通过计算属性返回包含 CSS 变量的样式对象
		customStyles() {
			return {
				'--difference-percentage': `${this.progress}%` // 设置 CSS 变量
			};
		},
		// 待解锁
		toBeUnlocked() {
			// 总金额 - 已释放
			return this.model.totalAmount - this.model.releasedAmount
		},
		// 已领取
		haveReceived() {
			return this.model.pending
			// 已经释放 - 循环遍历的
			let mapMony = this.model.transactions.reduce((r, c) => {
				return r + Number(c.amount || 0); // 确保 `amount` 是数值
			}, 0);
			return this.model.releasedAmount - mapMony
		},
		// 待领取 = 已释放 - 已领取
		pendingCollection() {
			return this.model.releasedAmount - this.haveReceived
		}
	},
	onShow() {
		this.vestingbeneficiaryApi()
		this.getUserInfoApi()
	}
};
</script>

<style scoped lang="scss">
.oneImage {
	width: 129rpx;
	height: 129rpx;
}


.wallet-avatar-gap {
	border-radius: 40rpx;
	background-color: #4a90e2;
	width: 80rpx;
	height: 80rpx;
	margin-right: 31rpx;
}

.content {
	width: 100%;
	min-height: 100vh;
	background-color: #1f2630;
}

.claimBox {
	display: flex;
	align-items: center;
	padding-top: 50rpx;
	justify-content: space-between;

	.claim1 {
		width: 22rpx;
		height: 38rpx;
		margin-left: 28rpx;
	}

	.claim2 {
		font-weight: 500;
		font-size: 36rpx;
		color: #ffffff;
		// margin-left: 275rpx;
	}
}

.addressOne {
	display: flex;
	align-items: center;
	margin-top: 59rpx;
	margin-left: 30rpx;

	.tp {
		width: 100rpx;
		height: 100rpx;
	}

	.address {
		font-weight: 300;
		font-size: 36rpx;
		color: #ffffff;
		margin-left: 21rpx;
	}

	.down {
		width: 25rpx;
		height: 14rpx;
		margin-left: 20rpx;
	}
}

.picBox {
	width: 690rpx;
	height: 420rpx;

	// background-image: url("/static/home/nine.png");
	background: url('/static/home/nine.png') no-repeat;

	background-size: 100%;

	margin-left: 30rpx;
	margin-right: 30rpx;
	margin-top: 30rpx;

	.picOne {
		display: flex;
		align-items: center;
		padding-top: 30rpx;
		height: 102rpx;

		.pic1 {
			width: 44rpx;
			height: 48rpx;
			margin-left: 22rpx;
		}

		.num1 {
			font-size: 30rpx;
			color: #ffffff;
			margin-left: 11rpx;
		}

		.num2 {
			font-size: 48rpx;
			color: #ffffff;
			margin-left: 45rpx;
		}

		.pic2 {
			width: 35rpx;
			height: 23rpx;
			margin-left: 20rpx;
		}
	}

	.drawDownBox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		// margin-top: 63rpx;
		margin-top: 33rpx;

		.drawOne {
			// margin-left: 46rpx;
			text-align: center;

			.one {
				font-size: 36rpx;
				color: #ffffff;
			}

			.one1 {
				font-size: 24rpx;
				color: #8e8e8f;
			}
		}

		.drawTwo {
			// margin-left: 125rpx;
			text-align: center;

			.two {
				font-size: 36rpx;
				color: #ffffff;
			}

			.two2 {
				font-size: 24rpx;
				color: #8e8e8f;
			}
		}

		.drawThree {
			// margin-left: 134rpx;
			text-align: center;

			.three {
				font-size: 36rpx;
				color: #ffffff;
			}

			.three3 {
				font-size: 24rpx;
				color: #8e8e8f;
			}
		}
	}
}

.progress-container {
	width: 600rpx;
	display: flex;
	margin: 0 auto;
	align-items: center;
	// background-color: #333;
	border-radius: 10px;
	// overflow: hidden;
	// margin-left: 45rpx;
	// margin-top: 60rpx;
	position: relative;
	flex-direction: column;
}

.progress-bar {
	width: 600rpx;
	height: 20rpx;
	// background-color: #ffcc00;
	border-radius: 12px;

	background: linear-gradient(to right, #ffcc00 var(--difference-percentage), #1F2631 0%);
	/* 黄色 */
	transition: width 0.5s ease-in-out;
}

.percentage {
	// position: absolute;
	// top: 41%;


	// left: 40%;
	// right: 10px;

	font-size: 72rpx;
	color: #fcd434;
}

.submitBox {
	width: 690rpx;
	height: 88rpx;
	background: #29313C;
	border-radius: 44rpx;
	margin-top: 60rpx;
	margin-left: 30rpx;


	.submit {
		font-weight: bold;
		font-size: 36rpx;
		color: #0d081a;
		line-height: 80rpx;
		text-align: center;
	}
}

.active {
	background: #fcd434 !important;
}
</style>